<template>
  <div>
    <Card title="参数配置" :bordered="false" :dis-hover="true">
      <Collapse simple v-model="panels">
        <Panel name="email" :hide-arrow="hideArrow">
          邮件配置
          <div slot="content">
            <Email />
          </div>
        </Panel>
        <Panel name="dingtalk" :hide-arrow="hideArrow">
          钉钉配置
          <div slot="content">
            <Dingtalk />
          </div>
        </Panel>
        <Panel name="report" :hide-arrow="hideArrow">
          测试报告
          <div slot="content">
            <Report />
          </div>
        </Panel>
        <Panel name="database" :hide-arrow="hideArrow">
          数据库配置
          <div slot="content" class="div">
            <template v-for="(item, index) in routers">
              <Button
                type="primary"
                size="small"
                ghost
                :key="index"
                class="button"
                @click="$router.push({ name: item.name })"
                >{{ item.title }}</Button
              >
            </template>
          </div>
        </Panel>
      </Collapse>
    </Card>
  </div>
</template>
<script>
import Email from "@/view/components/HttpAutoTestService/parameter-config/email";
import Dingtalk from "@/view/components/HttpAutoTestService/parameter-config/dingtalk";
import Report from "@/view/components/HttpAutoTestService/parameter-config/report";
export default {
  name: "parameter-config",
  components: {
    Email,
    Dingtalk,
    Report,
  },
  data() {
    return {
      panels: ["email", "dingtalk", "report", "database"],
      hideArrow: false,
      routers: [
        {
          name: "mysql_config",
          title: "MySQL数据库配置",
        },
        {
          name: "redis_config",
          title: "Redis数据库配置",
        },
      ],
    };
  },
  methods: {},
};
</script>
<style lang="less" scoped>
.div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  .button {
    margin: 10px 10px 0 0;
  }
}
</style>